<template>
<div id="index">
  
  <div class="header-search">
    <div class="left">
      <a href=""><img width="100px" src="http://192.168.50.27:8000/logo.jpg" /></a>
    </div>
    <div class="right">
      <div class="fl near-search f-cb">
        <div class="fl f-cb near-search-lef">
          <div class="fl near-drop-input">
            <input type="text" placeholder="项目关键词、拼音、分类等" class="all-input hasScript" id="serchContent" value="">
          </div>
          <div class="fl new-search-hot" id="serchresult" style="display: none;">
            <div class="new-hot-list">
              <ul class="new-hot-item navbar-nav" id="items">
              </ul>
            </div>
          </div>
        </div>
        <button class="fl ni-btn-icon" id="sendSerch">搜&nbsp;索</button>
        <button class="fl ni-btn-demand releaseRequire" @click="release">发布需求</button>
        <sale :dialogFormVisible="dialogFormVisible" @closeTab="closeThis"></sale>
      </div>
    </div>
  </div>
  <div class="auction-nav">
    <div class="wid">
      <div class="auction-nav--after">
        <div class="fl auction-nav-left">
          <div class="">
            <i></i>商品分类
          </div>
        </div>
        <ul class="f-cb auction-nav-list" id="menu">
          <li v-for="item in nav" :key="item.name">
            <router-link target="_blank" class="top_menu" :to="item.link">{{item.name}}</router-link>
            <span v-if="item.isHot==1"><img v-bind:src="hotimg" style="margin-top: -12px;margin-left: -4px;vertical-align: 12px;"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="wid f-cb menu-area">
    <div class="fl auc-categorys" style="display: block">
      <div class="fl auc-categorys-lef">
        <!--左侧菜单-->
        <div class="auc-cl-list">
          <div class="auc-cl-list">
            <div v-for="items in menu" :key="items.photo">
              <div class="dt"><a :href="items.link">{{items.name}}</a></div>
            </div>
        </div>
        </div>
        <!--左侧菜单结束-->
      </div>

    </div>

  <div class="banner1">
      <el-col :span="14" :push="1">
    <el-carousel indicator-position="outside" height="354px" style="margin-right: 10px;margin-top: 20px">
      <el-carousel-item v-for="item in photo" :key="item.photo">
        <img :src="item.photo" alt="" style="width: 695px;height: 390px;cursor: pointer">
      </el-carousel-item>
    </el-carousel>
      </el-col>
  </div>

    <div class="fr auc-categorys-rig">
      <div class="acr-main">
        <a rel="nofollow" href="javascript:void(0)" onclick="isHall()" class="near-btn">我的竞价室</a>
        <a rel="nofollow" href="/userCenterHome/homeForMyAccount.shtml?label=wdbzj"
           class="near-btn">我的保证金</a>
        <a rel="nofollow" href="/order/allorder"
           class="near-btn">我的订单</a>
        <a rel="nofollow" href="/userCenterHome/homeForMyAccount.shtml?label=wdxx"
           class="near-btn">我的消息</a>
      </div>
      </div>

  </div>

  
</div>
</template>
<script>
import sale from "../views/Sale"


export default {
  name: 'index',
  components:{
    sale
  },
  data(){
    return{
      nav:[
        {name:'手机',link:"/show",isHot:1},
        {name:'数码产品',link:"/show",isHot:0},
        {name:'平板电脑',link:"/show",isHot:0},
        {name:'竞价专场',link:"/show",isHot:1},
        {name:'其他',link:"/show",isHot:0},

      ],
      menu:[
        {link:'#',name:'苹果'},
        {link:'#',name:'华为'},
        {link:'#',name:'小米'},
        {link:'#',name:'vivo'},
        {link:'#',name:'oppo'},
        {link:'#',name:'其他'},
      ],
      photo:[
        {photoname:'苹果',photo:'https://img.alicdn.com/imgextra/i4/1917047079/O1CN01z7HxHb22AENVQOKNb_!!1917047079.png',photolink:'#'},
        {photoname:'苹果',photo:'https://img.alicdn.com/tfs/TB1.sj6SpzqK1RjSZFoXXbfcXXa-800-300.jpg_q80.jpg',photolink:'#'},
        {photoname:'苹果',photo:'https://img.alicdn.com/tps/TB1ht6FOVXXXXa3aXXXXXXXXXXX-800-300.jpg',photolink:'#'},
        {photoname:'苹果',photo:'https://img11.360buyimg.com/n7/jfs/t1/675/19/13256/67089/5bd66013Ec5df7194/c387b050cd52e047.jpg',photolink:'#'}
      ],
      typeName:[

      ],
      hotimg:"https://res.dscq.com/source/img/indexV6/img/hot.gif",
      dialogFormVisible:false,
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods:{
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
    },
    closeThis(row){
      this.dialogFormVisible = row;
    },
    release(){
      this.dialogFormVisible  = true;
    },
    myvip(){
      //设置session id
      sessionStorage.setItem("id",this.$route.query.user.id);
       this.$router.push({path:'/vips'});
    },
    login(){
      this.$router.push({path:'/login'});
    }
  }
}
</script>
<style>
.header-search{
  width: 1210px;
  margin: 0 auto;
  margin-top: 35px;
  display: flex;
  justify-content: space-between;
}
/*search*/

.near-search {
  height: 40px;
  float: right;
  margin-top: 10px;
}

.near-search .near-search-lef {
  border: 1px solid #c7080d;
  border-right: 0;
}

.near-search-lef .near-drop-type {
  width: 82px;
  padding-left: 15px;
  color: #b2b2b2;
  border-right: 1px solid #e0e0e0;
  box-sizing: border-box;
  position: relative;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}

.near-drop-type ul {
  position: absolute;
  border: 1px solid #E0E0E0;
  width: 83px;
  top: 40px;
  left: -1px;
  box-sizing: border-box;
  display: none;
  z-index: 99;
  background-color: #fff;
}

.near-drop-type ul li {
  cursor: pointer;
  line-height: 30px;
  background: #fff;
  padding-left: 15px;
  color: #595656;
}

.near-drop-type ul li:hover {
  background: #f7f7f7;
}

.near-search-lef .near-drop-type:hover ul {
  display: block;
}

.near-search-lef .near-drop-type:hover .arrowdown-icon {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.near-search-lef .near-drop-input {
  width: 421px;
  height: 34px;
  line-height: 34px;
  color: #B2B2B2;
}

.near-search-lef .near-drop-input input {
  width: 421px;
  height: 34px;
  line-height: 34px;
  color: #B2B2B2;
  box-sizing: border-box;
  padding-left: 10px;
}

.near-search-lef .near-drop-input input:focus {
  outline: none;
}

.near-search .ni-btn-icon {
  display: inline-block;
  width: 120px;
  height: 36px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  background: #c12b24;
  cursor: pointer;
  color: #fff;
}

.near-search .ni-btn-demand{
  width: 124px;height: 32px;margin-left: 18px;cursor: pointer;
  background: #fff;font-size: 16px;color: #c12b24;border: 2px solid #c12b24;
}
.near-search .ni-btn-demand:hover{
  background: #c12b24;color: #fff;
}
.my-auction .dt {
  cursor: pointer;
  width: 140px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #E0E0E0;
  color: #7f7f7f;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}



</style>